import React, { useState } from 'react';

const App = () => {
  const [obj, setObj] = useState({
    w: 100,
    h:100,
    x:0,
    y:0
  })

  function mouseMove(event){
    console.log(event.clientX,event.clientY);
    // 鼠标移动的时候发现 w 和 h 的数据丢失了
    // 因为 {x: 1, y: 1} 代替了原来的 obj,所以没有了 w 和 h
    // setObj({
    //   x: event.clientX,
    //   y: event.clientY,
    // })

    // 如果有很多属性这么写太费劲了
    // setObj({
    //   x: event.clientX,
    //   y: event.clientY,
    //   w: 100,
    //   h:100,
    // })

    // 该方法完美解决
    // setObj({
    //   ...obj,
    //   x: event.clientX,
    //   y: event.clientY
    // })

    setObj((prev)=>{
      // assign 方式可以将多个对象合并成一个对象
      // 第一个参数是将后面所有的对象合并到该对象中
      // 后续参数就是需要合并的对象
      // 靠后面的对象会覆盖前面对象的相同属性
      return Object.assign({},prev, {x: event.clientX,y: event.clientY})
    })


  }

  return (
    <div style={{width: '100vw', height: '100vh'}} onMouseMove={mouseMove} >
      <div> 元素的宽度： {obj.w}, 元素的高度： {obj.h} </div>
      <div> 元素的坐标： {obj.x} --- {obj.y} </div>
    </div>
  );
};

export default App;
